<%@page import="java.util.Locale"%>
<%@page import="java.util.ResourceBundle"%>
<%@page import="com.tubemostwanted.model.TubeModel"%>
<%@page import="com.tubemostwanted.entity.Tube"%>
<%@page import="java.util.List" %>
<%@page import="com.google.appengine.api.datastore.Text" %>
<%	
	request.setCharacterEncoding("UTF-8");	
	ResourceBundle resource = ResourceBundle.getBundle("config", new Locale("vi"));
	Tube tub = (Tube)request.getAttribute("detail");		
	String url = request.getAttribute("url").toString();
	String title = tub.getTitle().getValue() + " - " + resource.getString("site_name") ;
	String description = tub.getTitle().getValue() + " - " + resource.getString("site_description") ;
	String site_name = resource.getString("site_name");
	String keyword = "";
	for(Text tag: tub.getKeywords()){
		keyword += tag.getValue() + ", ";
	}
%>

<jsp:include page="/element/header.jsp">	
	<jsp:param name="url" value="<%= url %>"/>
	<jsp:param name="title" value="<%=title %>"/>	
	<jsp:param name="key" value="<%=keyword %>"/>
	<jsp:param name="site_name" value="<%=site_name %>"/>	
	<jsp:param name="images" value="<%=tub.getThumbImageUrl().getValue() %>"/>
	<jsp:param name="description" value="<%=description %>"/>
</jsp:include>
<div class="clear"></div>    	
<div class="video-player-wrapper" id="video-player-wrapper">
<div class="video-player">
		<div class="suggestions">
		<div class="re-video-items">	
		<%
			List<Tube> listRelate = TubeModel.getAllByCategory(tub.getCategoryAlias());
			if(listRelate!=null && listRelate.size()>0){
				for(Tube relateTub: listRelate){	
					if(relateTub.getTubeId().equalsIgnoreCase(tub.getTubeId())){
						continue;
					}
					%>
						<div class="re-video-item" id="re-video-" title="<%=relateTub.getTitle().getValue()%>">
						<div class="re-video-item">
						<div class="re-video-thumb">      
						<a class="re-video-thumb-url" href="/video/<%=relateTub.getTubeId() %>/<%=relateTub.getAlias().getValue() %>.html" style="width: 112px; height:84px;"><img src="<%=relateTub.getThumbImageUrl().getValue() %>" width="112" height="84" alt="" /></a>
						<span class="re-video-durationHMS"><%=relateTub.getTotalTime().getValue() %></span>                   
						</div>
						<div class="re-video-summary">
						<div class="re-video-title">
						<a href="/video/<%=relateTub.getTubeId() %>/<%=relateTub.getAlias().getValue() %>.html"><%=relateTub.getTitle().getValue() %></a>
						</div>        
						<div class="re-video-details small">               
						<div class="re-video-lastupdated">
							<%
								String[] spl = relateTub.getAuthorUrl().split("/"); 
							    String author = spl[spl.length-1];
							%>
							<p>by <a style="color: #259AE0" href="/channel/<%=relateTub.getAuthorUrl() %>" title="Channel <%=relateTub.getAuthorUrl() %>"><%=author%></a></p>
							<p><%=relateTub.getViewCount() %> views</p>
						</div>
						 </div>
						 </div>
						<div class="clr"></div>
						</div>
						</div><!---end-->
					<%
				}
			}
			
		%>	
		</div>
		</div>
		
<div id="playlistPlayer">
<div id="videoPlayer" class="swf-container">
<h1><span style="color:#259ae0;"> <a href="/channel/<%=tub.getAuthorUrl()%>"><span style="color:#259ae0;"><%=tub.getTitle().getValue() %></span></a></span></h1>
<script type="text/javascript" src="/js/swfobject.js"></script>
<object width="671" height="366">
  <param name="movie"
         value="https://www.youtube.com/v/<%=tub.getTubeId() %>?version=3&rel=0&autohide=1&autoplay=1&autohide=1&showinfo=0">
  </param>  
  <param name="wmode" value="opaque">
  <param name="allowFullScreen" value="true"></param>
  <param name="allowScriptAccess" value="always"></param>
  <embed src="https://www.youtube.com/v/<%=tub.getTubeId() %>?version=3&rel=0&autohide=1&autoplay=1&autohide=1&showinfo=0"
         type="application/x-shockwave-flash"  
         allowfullscreen="true"
 		 allowscriptaccess="always"
         wmode ="opaque"
         width="671" height="366">
  </embed>
</object>
</div>
<p>	
</p>
<br />
<jsp:include page="/element/advertising_detail01.jsp"/>	
</p>
</div>
</div>
</div>
<section id="wrapper">
<div id="video_btn" class="two_third">
	<ul>
		<!-- <li><a id="embed" href="#embedcodediv" class="btn_smallwhite ico_link"> Embed video</a></li> -->
		<li><a id="repeat" href="http://www.youtube.com/watch?v=<%=tub.getTubeId() %>" class="btn_smallwhite ico_action">Repeat</a></li>
		<li><a id="like" href="#" onClick=";return false;" class="btn_smallwhite ico_heart">Like</a></li>	
		<li></li>
	</ul>
</div>	
<div id="video_socialbox" class="one_third last">
	<ul>
		<li> <div class="fb-like" data-send="false" data-layout="box_count" data-width="50" data-show-faces="false" data-font="verdana"></div></li>
		<li><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="Marius_SEO">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script></li>
		<li><g:plusone size="tall"></g:plusone></li>
	</ul>
</div>
<div class="clear"></div>
<div id="playlist_container" class="one last" style="display:none; padding-bottom:20px; border-bottom: solid 3px #b01e33;">
	
</div>		 

<div id="voting_result" style="display:none;"></div>		 
<div class="one" style="padding-left:12px;">	
<div class="two_fifth">

<br/>

[<a href="/videos/featured/">Featured videos</a>] <br />  <h3><%=tub.getTitle().getValue() %></h3><br/>
 <%
 	if(tub.getKeywords()!=null&&tub.getKeywords().size()>0){
 %>
 <div class="xtoggle one"><h4><img src="http://videoinedit.com//tpl/images/icons/link2.png"/>Video tags</h4>
	<div class="xtoggle-content" data-show="true">
	 <div class="video_tag_cloud one">
	 	<%
	 		for(Text tag: tub.getKeywords()){
	 			%>
	 				<a href="/keyword/<%=tag.getValue()%>"><%=tag.getValue() %></a>
	 			<%
	 		}
	 	%>	 	
 	</div> 
	</div> 
</div> 
<%
 	}
%>
<%
	if(tub.getOtherKeywords()!=null && tub.getOtherKeywords().size()>0){
%>
<div class="xtoggle one"><h4><img src="http://videoinedit.com//tpl/images/icons/link2.png"/>Other tags</h4>
	<div class="xtoggle-content" data-show="false">
	 <div class="video_tag_cloud one">
	 	<%
	 		for(Text tag: tub.getOtherKeywords()){
	 			%>
	 				<a href="/keyword/<%=tag.getValue()%>"><%=tag.getValue() %></a>
	 			<%
	 		}
	 	%>	 	
 	</div> 
	</div> 
</div> 
<%
	}
%>
<%
	if(tub.getDescription()!=null){
%>
<div class="xtoggle one"><h4><img src="http://videoinedit.com//tpl/images/icons/info.png"/>Video description</h4>
<div class="xtoggle-content" data-show="false">
 <br /> <p><%=tub.getDescription().getValue() %></p></div> 
</div> 
<%
	}
%>
<div class="xtoggle one"><h4><img src="http://videoinedit.com//tpl/images/icons/facebook.png"/>Facebook comments</h4>
<div class="xtoggle-content" data-show="false" style="min-height:200px">
<div class="fb-comments" id="fb-comments" data-href="<%=request.getServerName() %>" data-num-posts="4" data-width="364"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=165471683512060";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
</div> 
</div> 
<div class="clear" style="height:10px;"></div>	

</div>	
<div class="two_fifth">
	<p>To comment please login/register.</p>
<a class="get-in" href="#"><img src="/images/t-button.png"/></a>
<a class="get-in" href="#"><img src="/images/fb-button.png"/></a>


                 
                <div class="comment-data">
                 	
                						
				</div>
				
				<br />
<div class="clear"></div>	
</div>
<div class="one_fifth last">
<jsp:include page="/element/advertising_detail02.jsp"/>	
</div>
</div>	
<div class="clear"></div>		
		</div>
<br/> 
<br />
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=145603018795644";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script type="text/javascript">
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</div>   	

<div class="box one" id="embedcodediv" style="display:none; width:290px;">
<div class="header">
<h2>Embed the video</h2>
</div>			

<div class="content padding">

	Link to it: <br />
	<input name="txt" value="/video/<%=tub.getTubeId() %>/<%=tub.getAlias() %>" type="text" class="form-input"/>
<br/> <br/> 
	<p>Embed it:</p>
	<br />
	<textarea  class="form-input" cols="20" rows="2" style="width:260px; height:50px; font-size:11px;" maxlength="1045" >
<iframe width="671" height="366" src="http://www.youtube.com/embed/<%=tub.getTubeId() %>?rel=0&amp;hd=1" frameborder="0"></iframe>
<br/> <small>As seen on : <a href="/video/<%=tub.getTubeId()%>/<%=tub.getAlias()%>"><%=tub.getTitle().getValue() %></a></small> 
</textarea>
	
	</div>
	</div>
<div class="clear"></div>
<jsp:include page="/element/advertising_detail03.jsp"/>
	
<script type="text/javascript" src="/js/jquery.jscrollpane.min.js"></script>
<script type="text/javascript" src="/js/scroll-startstop.events.jquery.js"></script>
<script type='text/javascript' src='/js/videoscroll.js'></script>
<script type="text/javascript">
jQuery(document).ready(function(){	
	$('#like').click(function(){
		var b = "592607";
		var dataString = 'val=' + b;
		$.post("components/voting.php?"+ dataString, {
		}, function(response){
			$('#voting_result').fadeIn();
			$('#voting_result').html($(response).fadeIn('slow').delay(2500).fadeOut());
});
	});	
});	
</script>
<jsp:include page="/element/footer.jsp"/>	
	
